@import '../../styles/variables';
@import '../../styles/mixins';

.angle {
  @include fullWidth();
  @include headerAngles($ms-color-neutralLighter);
  background-color: $color-resources-medium;
  content: '';
  display: block;
  margin-bottom: 40px;
  min-height: 80px; // Enough height to fit angle
}

.pageTitle {
  color: $ms-color-neutralDark;
  display: block;
  font-size: $ms-font-size-xxl;
  font-weight: $ms-font-weight-light;
  line-height: 1.2;
  margin-bottom: 40px;
  max-width: 12em;
}

.channel {
  margin-bottom: 60px;
}

.title {
  color: $ms-color-black;
  display: block;
  font-size: $font-size-big;
  font-weight: $ms-font-weight-semilight;
  line-height: 1.5;
  margin-bottom: 8px;
}

.imageWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  height: 140px;

  img {
    max-width: 100%;
    height: auto;
  }
}

.description {
  color: $ms-color-neutralPrimary;
  font-size: $ms-font-size-m;
  line-height: 1.5;
  display: block;
  margin-bottom: $contentMargin-vertical;
  margin-top: 5px;
}

.reachOut {
  a,
  a:visited,
  .reachOutLink {
    color: $color-resources-darker;
  }

  h2 {
    margin-bottom: 60px;
  }
}

.related {
  margin-bottom: 60px;
  @include ms-padding-left($contentInGrid);

  h2 {
    color: $ms-color-neutralPrimary;
    font-size: $font-size-bigger;
    font-weight: $ms-font-weight-light;
    line-height: 1.2;
    margin-top: 0;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 40px;

    &::after {
      background-color: $color-resources-medium;
      border-radius: 3px;
      bottom: 0;
      content: '';
      height: 6px;
      @include ms-left(0);
      position: absolute;
      width: 95%;
    }
  }

  .relatedLink {
    color: $ms-color-themePrimary;
  }

  p,
  h3 {
    max-width: 40em;
  }
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .angle {
    margin-top: 0; // Move back down to ensure room for in-page nav
    min-height: 148px;
  }

  .pageTitle {
    font-size: $font-size-bigger;
  }

  .reachOut {
    margin-bottom: 60px;
  }
}
